import React, { Component } from 'react'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import Classify from '../Classify'
import { URL } from '../../utils/request'

import './index.scss'


export default class Index extends Component {

  componentDidMount () {
    this.setNavBar();

    Taro.request({
      method: 'POST',
      url: `${URL}api/goods_lists`,
      data: {},
      header: {
        'content-type': 'application/json' // 默认值
      }
    }).then(res => {
      this.setState({
        goods: res.data.data
      });
    });
  }

  componentDidUpdate () {
    this.setNavBar();
  }

  state = {
    classify: [
      {
        icon: 'https://itbee-resources.oss-cn-shanghai.aliyuncs.com/store/dress.png?OSSAccessKeyId=LTAIIwebFlSntYWz&Expires=1660223575&Signature=zZkRnKbeijq0rWhZMrsXFDsDwnU%3D',
        name: '小仙女',
        url: '/pages/goods_lists/index',
      },
      {
        icon: 'https://itbee-resources.oss-cn-shanghai.aliyuncs.com/store/ice_cream.png?OSSAccessKeyId=LTAIIwebFlSntYWz&Expires=1660223623&Signature=u%2FNgkdiizHpfD%2BYqqeqi8MlrvrQ%3D',
        name: '小帅哥',
        url: '/pages/goods_lists/index',
      },
      {
        icon: 'https://itbee-resources.oss-cn-shanghai.aliyuncs.com/store/high_heeled_shoes.png?OSSAccessKeyId=LTAIIwebFlSntYWz&Expires=1660223536&Signature=i9mydUJaXy7mbULsaS%2BBYwFczxY%3D',
        name: '女神范',
        url: '/pages/goods_lists/index',
      },
      {
        icon: 'https://itbee-resources.oss-cn-shanghai.aliyuncs.com/store/perfume.png?OSSAccessKeyId=LTAIIwebFlSntYWz&Expires=1660223730&Signature=AePj%2Bkebo7n3LePpM54x8Sz7siE%3D',
        name: '饰品盒',
        url: '/pages/goods_lists/index',
      },
      {
        icon: 'https://itbee-resources.oss-cn-shanghai.aliyuncs.com/store/watch.png?OSSAccessKeyId=LTAIIwebFlSntYWz&Expires=1660223784&Signature=ZM%2FL%2FfsA7ev%2FS%2BfVZ9CMBwWILtE%3D',
        name: '男神装',
        url: '/pages/goods_lists/index',
      }
    ],
    goods: [],
  };

  setShow () {
    Taro.navigateTo({
      url: '/pages/goods_lists/index'
    });
  }

  setNavBar () {
    Taro.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#E62C6F'
    });

    Taro.setNavigationBarTitle({
      title: '商城'
    });
  }


  render () {
    let { goods, classify } = this.state;

    return (<View className='box'>
      <Classify classify={classify} goods={goods} setShow={this.setShow.bind(this)} />
      </View>)
  }
}
